<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title></title>
  <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
  <link rel="stylesheet" href="http://cache.amap.com/lbs/static/AMap.DrivingRender1120.css" />
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <style>
    #container {
      width: 84%;
      height: 100%;
      position: relative;
      overflow: hidden;
      float: right;
    }

    #tool {
      width: 16%;
      height: 100%;
      overflow: auto;
      box-shadow: 0 0 14px rgba(0, 0, 100, .2);
      height: 100%;
      background-color: white;
      float: right;
      z-index: 9999;
    }
  </style>
  <script type="text/javascript"
    src="http://webapi.amap.com/maps?v=1.3&key=3f106cab686aa907fae5d023cca93351&plugin=AMap.Driving,AMap.MouseTool,AMap.PolyEditor,AMap.ToolBar"></script>
  <script type="text/javascript" src="http://cache.amap.com/lbs/static/DrivingRender1230.js"></script>
  <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>

  <div id="container"></div>
  <div id="tool">
    <center>
      <button id="circle">画圆</button>
      <button id="rectangle">矩形</button>
      <button id="polygon">多边形</button>
      <button id="closeMouse">清除</button>
      <button id="testCircle">判断一个点是否在一个圆里</button>
      <button id="testPolygon">判断一个点是否在一个多边形里</button>
    </center>
  </div>
  <div id="panel">

  </div>
  <div style="height: 10%;float: left">
  </div>
  <!-- <script src="./jquery.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    var map = new AMap.Map("container", {
      center: [116.433322, 39.900256],
      zoom: 14
    });

    var circle = new AMap.Circle({
      center: [113.6253, 34.7471],
      radius: 300, //半径
      borderWeight: 3,
      strokeColor: "#FF33FF",
      strokeOpacity: 1,
      strokeWeight: 6,
      strokeOpacity: 0.2,
      fillOpacity: 0.4,
      strokeStyle: 'dashed',
      strokeDasharray: [10, 10],
      // 线样式还支持 'dashed'
      fillColor: '#1791fc',
      zIndex: 50,
    })

    map.add(circle);
    // 缩放地图到合适的视野级别
    map.setFitView([circle])
    var marker = new AMap.Marker({
      map: map,
      draggable: true,
      position: [113.6253, 34.7471]
    });

    //console.log(circle.contains(myLngLat))
    function compute() {
      var lat = 34.7471;
      var lng = 113.5253;
      var radius = 3000;
      var myLngLat = new AMap.LngLat(113.5253, 34.7471);
      var circlex = new AMap.Circle({
        center: new AMap.LngLat(113.5253, 34.7471),// 圆心位置
        radius: 300, //半径
      });
      console.log('circle2', circlex)
      console.log(circle.contains(myLngLat))
      var isPointInRing = circlex.contains(myLngLat)
      //AMap.GeometryUtil.isPointInRing(point,circle.getRadius());

      marker.setLabel({
        content: isPointInRing ? '内部' : '外部',
        offset: new AMap.Pixel(20, 0)
      });
    }

    compute();
    //var lat = 34.7471;
    //  var lng = 113.5253;
    //     var radius = 300;
    //      var myLngLat = new AMap.LngLat(113.5253, 34.7471);
    //     var circle2 = new AMap.Circle({
    //      center: [113.6253, 34.7471],// 圆心位置
    //       radius: radius //半径
    //    });
    // console.log(circle2.contains(myLngLat))
    // 为marker绑定拖拽事件
    marker.on('dragging', compute)
    var circleEditor = new AMap.CircleEditor(map, circle)

    circleEditor.on('move', function (event) {
      log.info('触发事件：move')
    })

    circleEditor.on('adjust', function (event) {
      log.info('触发事件：adjust')
    })

    circleEditor.on('end', function (event) {
      log.info('触发事件： end')
      // event.target 即为编辑后的圆形对象
    })
  </script>
  <!-- <script type="text/javascript">

    var status;

    var map = new AMap.Map("container", {
      resizeEnable: true
    });

    map.plugin(["AMap.ToolBar"], function () {   //在地图中添加ToolBar插件
      toolBar = new AMap.ToolBar();
      map.addControl(toolBar);
    });
    toolBar.hide();

    map.plugin(["AMap.MouseTool"], function () {        //鼠标工具插件
      mousetool = new AMap.MouseTool(map);
    });
    $('#circle').click(function () {
      status = 'circle';
      console.log('456789')
      mousetool.circle();
    });
    $('#rectangle').click(function () {
      status = 'rectangle';
      mousetool.rectangle();
    });
    $('#polygon').click(function () {
      status = 'polygon';
      mousetool.polygon();
    });
    var marker = new AMap.Marker({
      map: map,
      draggable: true,
      position: [116.566298, 40.014179]
    });

    function compute() {
      var point = marker.getPosition();
      var isPointInRing = AMap.GeometryUtil.isPointInRing(point, path);
      marker.setLabel({
        content: isPointInRing ? '内部' : '外部',
        offset: new AMap.Pixel(20, 0)
      });
    }

    // compute();
    // 为marker绑定拖拽事件
    marker.on('dragging', compute)
    AMap.event.addListener(mousetool, 'draw', function (e) {
      //arr = e.obj.getPath();//获取路径坐标
      if (status == 'circle') {
        lng = e.obj.getCenter().lng;
        lat = e.obj.getCenter().lat;
        radius = e.obj.getRadius();
        //     var point = marker.getPosition();
        // var isPointInRing = AMap.GeometryUtil.isPointInRing(point,path);
        console.log('radius', radius)
      } else if (status == 'polygon' || status == 'rectangle') {
        var path = e.obj.getPath();
        arr = [];
        for (var i = 0; i < path.length; i++) {
          arr.push([path[i].lng, path[i].lat]);
        }
        console.log(arr);
      }

      //console.log(e.obj.getRadius());
      //console.log(e.obj);
    });

    $('#closeMouse').click(function () {
      mousetool.close(true);
    });



    $('#testCircle').click(function () {
      var lat = 34.7471;
      var lng = 113.5253;
      var radius = 300;
      var myLngLat = new AMap.LngLat(113.5253, 34.7471);
      var circle2 = new AMap.Circle({
        center: new AMap.LngLat(lng, lat),// 圆心位置
        radius: radius //半径
      });
      console.log('circle2',circle2)
      if (circle2.contains(myLngLat)) {
        alert('在');
      } else {
        alert('不在');
      }
    });

    var arr = [];


    $('#testPolygon').click(function () {
      var myLngLat = new AMap.LngLat(116.403984, 39.907535);
      // 定义一个多边形
      var polygon = new AMap.Polygon({
        path: arr
      });

      if (polygon.contains(myLngLat)) {
        alert('在');
      } else {
        alert('不在');
      }
    });
  </script> -->
</body>

</html>